<template>

    <div class = 'personMessageContain'>

        <el-form :model="user" label-position="right" class="personMessageForm">
            <div class="personMessageLeft">
                <span class="personMessageTitle">基本信息</span>
                <div class="personPhoto">
                    <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <el-avatar v-if="userPhoto" :size="150" :src="userPhoto" id="el-avatar"></el-avatar>
                        <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
                    </el-upload>
                </div>
                <div class="personMessage">

                    <el-form-item label="姓名" label-width="70px" style="width:300px">
                        <el-input v-model="user.username" :disabled="edit"/>
                    </el-form-item>
                    <el-form-item label="手机号" label-width="70px" style="width:300px">
                        <el-input v-model="user.mobile" :disabled="edit" />
                    </el-form-item>
                    <el-form-item label="邮箱" label-width="70px" style="width:300px">
                        <el-input v-model="user.email" :disabled="edit" type="email"/>
                    </el-form-item>
                    <el-form-item label="性别" label-width="70px" style="width:200px">
                        <el-select v-model="user.gender" :disabled="edit">
                            <el-option v-for="gender in genders" :key="gender" :value="gender"></el-option>
                        </el-select>
                    </el-form-item>
                    
                </div>
            </div>

            <div class="personMessageRight">
                <span class="personMessageTitle">详细信息</span>
                <div class="personDetail">
                    <div class="personDetailLeft">
                        <el-form-item label="研究领域" label-width="70px" style="width:320px">
                            <el-input v-model="user.researchField" :disabled="edit" />
                        </el-form-item>
                        <el-form-item label="研究内容" label-width="70px" style="width:320px">
                            <el-input v-model="user.researchDetail" :disabled="edit" />
                        </el-form-item>
                        <el-form-item label="最高学历" label-width="70px" style="width:200px">
                            <el-select v-model="user.hightestEducation" :disabled="edit">
                                <el-option v-for="Education in Educations" :key="Education" :value="Education"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="职称" label-width="70px" style="width:320px">
                            <el-input v-model="user.title" :disabled="edit" />
                        </el-form-item>
                        <el-form-item label="单位名称" label-width="70px" style="width:320px">
                            <el-input v-model="user.unit" :disabled="edit" />
                        </el-form-item>
                    </div>
                    
                    <div class="personDetailRight">
                        <el-form-item label="邮政编码" label-width="70px" style="width:360px">
                            <el-input v-model="user.addressCode" :disabled="edit" />
                        </el-form-item>
                        <el-form-item label="邮政地址" label-width="70px" style="width:360px;">
                            <el-input v-model="user.address" :disabled="edit" type="textarea" :rows="6" resize="none"/>
                        </el-form-item>
                    </div>
                </div>
            </div>
        </el-form>

        <div id="editBtn" v-if="edit">
            <el-button type="primary" circle @click="openEdit">
                <edit></edit>
            </el-button>
        </div>
        <div id="editBtn2" v-else>
            <el-button type="success" circle @click="submitEdit">
                <check></check>
            </el-button>
            <el-button type="danger" circle @click="cancelEdit">
                <close></close>
            </el-button>
        </div>

        <div class="statement">
			<div class="up">
				<span>帮助</span>
				<span>隐私</span>
				<span>条款</span>
			</div>
			<div class="down">
				<span>版权所有&nbsp;&nbsp;</span>
				<i class="iconfont icon-c-copy"></i>
				<span>中国矿业大学（北京）</span>
			</div>
		</div>
    </div>
</template>

<script>
import { Plus } from '@element-plus/icons-vue'
import { Edit,Check,Close } from '@element-plus/icons-vue'
export default {
    data(){
        return{
            genders:[ '男','女','保密' ],
            Educations:[ '保密','小学','初中','高中','中专','大专','本科','硕士','博士' ],
            user:{
                username:'皮卡丘',
                mobile:'77777777777',
                email:'2441994728@qq.com',
                gender:'保密',
                researchField:'',
                researchDetail:'',
                hightestEducation:'保密',
                title:'',
                unit:'',
                address:'',
                addressCode:''
            },
            edit:true,
            userPhoto: 'http://weam.oss-cn-beijing.aliyuncs.com/userPhoto/1452535637748191233.jpg',
        }
    },
    methods:{
        openEdit(){
            this.edit = false;
        },
        cancelEdit(){
            this.edit = true;
        },
        submitEdit(){
            this.edit = true;
        },
        handleAvatarSuccess(res, file) {
            this.userPhoto = URL.createObjectURL(file.raw)
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isJPG) {
                this.$message.error('Avatar picture must be JPG format!')
            }
            if (!isLt2M) {
                this.$message.error('Avatar picture size can not exceed 2MB!')
            }
            return isJPG && isLt2M
        },
    },
    components: { Plus,Edit,Check,Close },

}
</script>

<style>
#editBtn{
    position: absolute;
    top: 110px;
    left: 1780px;
}
#editBtn2{
    position: absolute;
    top: 110px;
    left: 1722px;
}
.personMessageForm{
    display: flex;
}
.personMessageContain{
    display: flex;
    flex-direction: row;
}
.personMessageLeft{
    display: flex;
    position: relative;
    width: 409px;
    height: 634px;
    margin: 20px 0px 0px 20px;
    box-shadow: var(--el-box-shadow-base);
    flex-direction: column;
}
.personMessageTitle{
    font-size: 24px;
    font-weight: 700;
    padding: 30px;
}
#el-avatar{
    margin-left: 40px;
}
.personPhoto{
    margin-top: 30px;
    height: 150px;
    width: 100%;
    position: relative;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    text-align: center;
    background-color: #eee;
    border-radius: 50%;
}
.avatar-uploader-icon svg {
    margin-top: 60px; /* (178px - 28px) / 2 - 1px */
}
.personMessage{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 300px;
    width: 100%;
    margin: 30px 0px 0px 25px;
    /* border: 1px solid blueviolet; */
}
.personMessageRight{
    display: flex;
    position: relative;
    width: 1159px;
    height: 634px;
    margin: 20px 0px 0px 20px;
    box-shadow: var(--el-box-shadow-base);
    flex-direction: column;
}
.statement{
	position: absolute;
	top: 90%;
    left: 48%;
	height: 80px;
	font-size: 14px;
	color: rgb(0, 0, 0, 0.4);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.statement .up{
	width: 150px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-self: center;
}
.statement .down{
	margin-top: 10px;
	width: 300px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.personDetail{
    display: flex;
    height: 500px;
    margin: 40px 60px;
    flex-direction: row;
}
.personDetailLeft{
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 420px;
    justify-content: space-evenly;
    border-right: 1px dashed var(--el-border-color-base);
}
.personDetailRight{
    margin-left: 40px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 245px;
    justify-content: space-between;
}
</style>